<template>
  <yy-paging v-model="dataList" @query="queryList" ref="paging" :auto="automatic" @scroll="scroll" :refresher-enabled="false">
    <template #top>
      <u-navbar
        back-text=""
        :is-back="true"
        title="注销帐号"
        :background="{ backgroundColor: isScroll ? '#FFFFFF' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
      >
      </u-navbar>
    </template>
    <view class="flex flex-col gap-3 p-4">
      <view class="font-medium text-[28px] text-[#161A24]"> 注销当前账号</view>
      <view class="text-[14px] text-[#161A24]">将{{ vk.getVuex('$user.userInfo.mobile') }}所绑定的账号注销：</view>
      <view class="text-[14px] text-[#161A24] flex flex-col gap-1">
        <view> 1、您的帐号立即失效，不可恢复；</view>
        <view> 2、您将自愿放弃此帐号下所有个人权益； </view>
        <view> 3、绑定的手机号会在注销操作后完成解除，解除后您可再次注册新的账号。 </view>
      </view>
    </view>
    <template #bottom>
      <view class="grid grid-cols-3 gap-2 px-4 py-3">
        <view class="flex col-span-1 justify-center">
          <view class="h-[44px] bg-[#fff] w-full rounded-full flex items-center justify-center" @click="logOff">
            <text class="text-[16px] text-[#C0C4CC]">注销</text>
          </view>
        </view>
        <view class="flex col-span-2 justify-center">
          <view class="h-[44px] bg-[#00A9AB] w-full rounded-full flex items-center justify-center" @click="vk.navigateBack()">
            <text class="text-[16px] text-[#fff]">我再想想</text>
          </view>
        </view>
      </view>
    </template>
  </yy-paging>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false,
        dataList: [],
        automatic: false
      }
    },

    methods: {
      logOff() {
        vk.confirm('是否确认注销该账号？', async res => {
          if (res.confirm) {
            let res = await api.sendSms({
              mobile: vk.getVuex('$user.userInfo.mobile') - 0,
              template_code: 'user_mobile_verify'
            })
            vk.toast(res.msg)
            if (!res.code) return
            vk.navigateTo(`/pages/my/verificationCode?mobile=${this.phoneNumber}&type=2`)
          }
        })
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async queryList(page, limit) {
        this.$refs.paging.complete([1, 1, 1])
      }
    }
  }
</script>

<style lang="scss" scoped></style>
